
// 计算器组件
<template>
  <section id="calcu-section">
    <!-- 除结算部分外 -->
    <el-dialog
      :visible.sync="objData.flag > 1 ? true :false"
      :before-close="handleClose"
      :class="objData.tabFlag > 0 ? 'tabFlag':''"
    >
      <!-- 头部 -->
      <el-tabs v-model="activeName" v-if="objData.tabFlag>0" @tab-click="handleClick">
        <el-tab-pane name="cash">
          <strong name="cash" slot="label" class="dialog-title title DisTitle">{{objData.title}}优惠</strong>
          <el-row>
            <!-- <el-row> <p>提示：可按F8切换金额优惠和折扣优惠</p> </el-row> -->
            <el-col>
              <el-row class="preAmount flex">
                <el-col>优惠前小计</el-col>
                <el-col>{{ (parseFloat(objData.data.preAmount)).toFixed(2) }}</el-col>
              </el-row>
              <el-row class="preAmount flex remark">
                <el-col>商品优惠</el-col>
                <el-col>{{ (parseFloat(objData.data.num?objData.data.num:0) - parseFloat(objData.data.preAmount)).toFixed(2) }}</el-col>
              </el-row>
              <el-row class="inputNum flex flex-vc">
                <el-input type="text" v-model="objData.data.num" maxlength="10">
                  <template slot="prepend">改后小计</template>
                </el-input>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane name="discount">
          <strong
            name="discount"
            slot="label"
            class="dialog-title title DisTitle"
          >{{objData.title}}折扣</strong>
          <el-row>
            <!-- <el-col> <p>提示：可按F8切换金额优惠和折扣优惠</p> </el-col> -->
            <el-col>
              <el-row class="preAmount flex">
                <el-col>优惠前小计</el-col>
                <el-col>{{ (parseFloat(objData.data.preAmount)).toFixed(2) }}</el-col>
              </el-row>
              <el-row class="inputNum flex flex-vc">
                <el-input type="text" v-model="objData.data.num" maxlength="10">
                  <template slot="append">折</template>
                </el-input>
              </el-row>
              <el-row class="preAmount flex remark">
                <el-col>商品优惠</el-col>
                <el-col>{{ (parseFloat(DisSum)-parseFloat(objData.data.preAmount)).toFixed(2) }}</el-col>
              </el-row>
              <el-row class="preAmount flex">
                <el-col>折后小计</el-col>
                <el-col>{{DisSum}}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <strong slot="title" v-else class="dialog-title title">{{ objData.title }}</strong>

      <!-- 中间 -->
      <!-- 修改数量 -->
      <el-row v-if="objData.flag == 3">
        <el-row class="tips">
          <!-- <el-row> <p>提示：可按键盘&nbsp;+-&nbsp;键修改数量</p> </el-row> -->
          <el-row class="preAmount flex">
            <el-col>当前售价</el-col>
            <el-col>{{ (parseFloat(objData.data.preAmount)).toFixed(2) }}</el-col>
          </el-row>
          <el-row class="inputNum flex">
            <el-input type="text" v-model.number="objData.data.num" maxlength="10">
              <template slot="prepend">数量</template>
            </el-input>
            <el-button class="el-icon-plus" @click="plusNum()"></el-button>
            <el-button class="el-icon-minus" @click="minusNum()"></el-button>
          </el-row>
          <el-row class="preAmount flex">
            <el-col>小计</el-col>
            <el-col>{{  (parseFloat(objData.data.preAmount) * parseInt(objData.data.num?objData.data.num:0)).toFixed(2) }}</el-col>
          </el-row>
        </el-row>
        <el-row class="bottomCont"></el-row>
      </el-row>
      <!-- 修改售价 -->
      <el-row v-if="objData.flag == 5">
        <el-row  class="inputNum flex">
          <el-input type="text" v-model="objData.data.num" maxlength="10">
            <template slot="prepend">售价</template>
          </el-input>
        </el-row>
        <el-row class="bottomCont"></el-row>
      </el-row>
      <!-- 修改整单折扣 -->
      <el-row v-if="objData.flag == 8">
        <el-row class="tips">
          <!-- <el-row> <p>提示：可按键盘&nbsp;+-&nbsp;键修改数量</p> </el-row> -->
          <el-row class="preAmount flex">
            <el-col>合计</el-col>
            <el-col>{{ (parseFloat(objData.data.preAmount)).toFixed(2) }}</el-col>
          </el-row>
          <el-row class="inputNum flex">
            <el-input type="text" v-model="objData.data.num" maxlength="10">
              <template slot="append">折</template>
            </el-input>
          </el-row>
          <el-row class="preAmount flex bold remark">
            <el-col>应收</el-col>
            <el-col>{{ (parseFloat(objData.data.acturalPay)).toFixed(2) }}</el-col>
          </el-row>
        </el-row>
        <el-row class="bottomCont"></el-row>
      </el-row>
      <!-- 修改整单改价 -->
      <el-row v-if="objData.flag == 9">
        <el-row>
          <el-input type="text" v-model="objData.data.num" maxlength="10">
            <template slot="prepend">应收</template>
          </el-input>
        </el-row>

        <el-row class="bottomCont"></el-row>
      </el-row>

      <!-- 尾部 -->
      <div slot="footer" class="dialog-footer">
        <div class="Calcu-num" @click.capture="Calcul($event)">
          <table>
            <tr>
              <td>7</td>
              <td>8</td>
              <td>9</td>
              <td rowspan="2" class="sureBtn">确 定</td>
            </tr>
            <tr>
              <td>4</td>
              <td>5</td>
              <td>6</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td rowspan="2" class="cancelBtn">取 消</td>
            </tr>
            <tr>
              <td>0</td>
              <td class="dotTd">.</td>
              <td class="backTd"></td>
            </tr>
          </table>
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
export default {
  props: {
    modifyData: {
      type: Object
    }
  },
  data() {
    return {
      objData: {
        flag: 0, //打开对话框的标识// flag: 1:结算，2：会员；3：数量；5：售价；6：商品优惠；7：更多;8：整单折扣；9：整单改价
        tabFlag: 0, //优惠标志 0：不是，1：是
        title: "",
        data: {} //需要处理的数据
      },
      clickNum: 0, //点击计算器数字的次数
      activeName: "cash", //优惠折扣切换标识
      DisSum: "0", //折后小计
      discount: 0 //初始化折扣数据
    };
  },
  created() {},
  mounted() {
    this.objData = this.$F.deepClone(this.modifyData);
    // console.log(this.objData, "===mounted2=");
  },
  computed: {},
  watch: {
    objData: {
      deep: true,
      handler: function(newVal, oldVal) {
        // 监听输入框值的变化
        // if (newVal.data.num != undefined) {
        var newNum = this.$F.trim(newVal.data.num.toString());
        // 输入框最大长度为10
        if (newNum.length > 10) {
          this.objData.data.num = newNum.slice(0, 10);
          return;
        }
        if (this.activeName === "discount") {
          if (this.discount) {
            this.objData.data.num = this.$F.PosDecimal1(newNum).toString();
            this.DisSum =
              (parseFloat(this.objData.data.preAmount)
             * parseFloat(this.objData.data.num / 10)).toFixed(2);
          }
          this.discount = 1;
        }
        if (newVal.flag == 8) {
          // 输入框为1位小数：PosDecimal1()
          if (this.discount) {
            this.objData.data.num = this.$F.PosDecimal1(newNum).toString();
            this.objData.data.acturalPay = (
              parseFloat(this.objData.data.preAmount)
            * parseFloat(this.objData.data.num / 10)
            ).toFixed(2);
          }
          this.discount = 1;
        }
        // 输入框为两位小数：PosDecimal2()
        else {
          this.objData.data.num = this.$F.PosDecimal2(newNum).toString();
        }
      }
    }
  },
  methods: {
    // 对话框点击关闭按钮的回调
    handleClose(done) {
      this.closeInit();
      done();
    },
    // 关闭对话框的数据初始化
    closeInit() {
      // this.objData.flag = 0;
      this.clickNum = 0;
      // if (this.objData.tabFlag) {
      this.discount = 0;
      this.activeName = "cash";
      this.DisSum = "0"; //折后小计

      this.modifyData.flag = 1;
    },
    // 提示信息
    warn(string) {
      this.$message({
        message: string,
        type: "warning"
      });
    },
    //点击计算器
    Calcul(event) {
      var e = event.target;
      if (e.nodeName == "TD") {
        // 点击数字区域
        if (this.$F.isNumber(e.innerText)) {
          this.CalNum(e);
        } else {
          // 点击不是数字区域
          this.CalNotNum(e);
        }
      }
    },
    // 点击数字区域
    CalNum(e) {
      // 初次点击数字，初始内容
      if (!this.clickNum) {
        this.objData.data.num = e.innerText;
        this.clickNum = 1;
        return;
      } else this.objData.data.num += e.innerText;
    },
    // 点击不是数字区域
    CalNotNum(e) {
      var num = this.$F.trim(this.objData.data.num);
      switch (e.className) {
        //点击'.'
        case "dotTd":
          if (num.indexOf(".") >= 0) {
            this.warn("请输入正确数值！");
            return;
          }
          this.objData.data.num += e.innerText;
          break;
        //点击 '< '
        case "backTd":
          this.objData.data.num = num.slice(0, num.length - 1);
          break;
        // 点击确定按钮
        case "sureBtn":
          if (!num || parseFloat(num) <= 0) {
            this.warn("请输入大于0的数值！");
            return;
          }
          if (this.objData.flag == 3) {
            if (parseFloat(num) < 1) {
              this.warn("允许输入最小数量为1");
              return;
            }
          }
          if (this.objData.flag == 6) {
            if (
              this.activeName === "cash" &&
              parseFloat(num) > parseFloat(this.objData.data.preAmount)
            ) {
              this.warn("允许输入最大金额为" + this.objData.data.preAmount);
              return;
            } else if (this.activeName === "discount" && parseFloat(num) > 10) {
              this.warn("允许输入最大折扣为10");
              return;
            }
          }

          if (this.objData.flag == 8) {
            if (parseFloat(num) > 10) {
              this.warn("允许输入最大折扣为10");
              return;
            }
          }
          if (this.objData.flag == 9) {
            if (parseFloat(num) > this.objData.data.preAmount) {
              this.warn("允许输入最大金额为" + this.objData.data.preAmount);
              return;
            }
          }
          if (this.activeName == "discount") {
            this.objData.data.num = (parseFloat(this.DisSum)).toFixed(2);
          }
          // 触发父级的函数

          this.$emit("modifyCb", this.objData);

          this.closeInit();

          break;

        // 点击取消按钮
        case "cancelBtn":
          this.$confirm("取消，数据不会跟新!", "提示")
            .then(_ => {
              this.closeInit();
            })
            .catch(_ => {});
          break;
        default:
          return;
      }
    },
    // +数量
    plusNum() {
      this.objData.data.num = (parseInt(this.objData.data.num) + 1).toString();
    },
    // -数量
    minusNum() {
      if (parseFloat(this.objData.data.num) > 1) {
        this.objData.data.num = (
          parseInt(this.objData.data.num) - 1
        ).toString();
      }
    },
    // 优惠和折扣切换
    handleClick(tab, event) {
      var name = event.target.getAttribute("name")
        ? event.target.getAttribute("name")
        : "";
      var id = event.target.getAttribute("id")
        ? event.target.getAttribute("id")
        : "";

      this.activeName = name ? this.activeName : this.activeName;
      if (name.indexOf("cash") >= 0 || id.indexOf("cash") >= 0) {
        this.discount = 0;
        this.objData.data.num = this.modifyData.data.num;
      } else if (name.indexOf("discount") >= 0 || id.indexOf("discount") >= 0) {
        this.DisSum = this.modifyData.data.num;
        var discount = (
           (parseFloat(this.modifyData.data.num) 
          / parseFloat(this.modifyData.data.preAmount))
          * 10
        ).toFixed(1);
        this.objData.data.num = discount;
      }
    }
  }
};
</script>

<style  lang="scss"  scoped>
.title,
.title strong {
  display: block;
  width: 97%;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tips p {
  margin-bottom: 5px;
  text-align: left;
}
.preAmount {
  width: 244px;
}
.inputNum {
  width: 244px;
  margin: 20px 0;
  .el-input {
    margin-right: 10px;
  }
}

.DisTitle {
  display: inline !important;
}
</style>
